<!-- 第二步 -->
<template>
    <div class="card-box">
      <ListBox
        :transObj="transObj"
        :haveOperation="haveOperation"
        :haveSerialNumber="haveSerialNumber"
        :cTData="securityList"
        @clickDel="handleDel"
      ></ListBox>
      <DelDialog  ref="delDialog" @certainDel="certainDel" ></DelDialog>
    </div>
  </template>
   
  <script setup>
  import { ref, onMounted } from "vue";
  import * as api from "@/api/index";
  import ListBox from "@/components/ListBox.vue";
  import DelDialog from "@/components/DelDialog.vue";
  import Demo2 from "./demo2.vue";
  const transObj = ref({
    tag: "标签",
    id: "密钥ID",
    authority: "访问权限",
    online: "密钥状态",
    cTime: "创建时间",
    uTime: "更新时间",
  });
  let haveOperation = true;
  let haveSerialNumber = true;
  
  let securityList = ref([]);
  const getSecurityList = () => {
    api.$securityList().then((res) => {
      securityList.value = res.data;
    });
  };
  
/**
 * 只用以下代码，需要修改请求 $securityDel
 */
//   ------------------------------------------------------
  //获取删除弹窗实例
  const delDialog = ref()
  let delObjIndex = ref(-1)
  let delObjId = ref(-1)
  //点击删除
  const handleDel = (scope) => {
    delDialog.value.delDialog = true;
    delObjIndex = scope.index;
    delObjId = scope.row.id;
  };
  //点击确认删除
  const certainDel = ()=>{
    // 发送请求删除元素
    api.$securityDel({id:delObjId}).then(res=>{
      securityList.value.splice(delObjIndex,1); 
      delDialog.value.delDialog = false;
    })
  }
  //   ------------------------------------------------------
  onMounted(() => {
    getSecurityList();
  });
  </script>
   
   
  <style lang='less'>
  </style>